<template>
  <div style="width: 100%" v-loading="loading" element-loading-text="加载中...">
    <div class="header">
      <mytitle :titleName="'测评报告'" :isMore="false" />
    </div>
    <div class="table">
      <el-table
        v-loading="pingLoading"
        :data="pingList"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f2f2f2' }"
      >
        <el-table-column prop="name" label="测评报告" width="500" />
        <el-table-column prop="date" label="测评时间" width="250" />
        <el-table-column prop="" label="操作" width="200">
          <template #default="scope">
            <el-button
              class="btns"
              size="small"
              type="primary"
              link
              @click="pingInfo(scope.row)"
              >查看</el-button
            >
            <el-button
              class="btns"
              size="small"
              type="primary"
              link
              @click="handleDown(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-model:page="pageDate.page"
      v-model:limit="pageDate.pageSize"
      :total="pageTotal"
      :background="false"
      @pagination="getList"
    ></pagination>
  </div>
  <downloadResult
    ref="downloadRef"
    :ciPingStutas="ciPingStutas"
  ></downloadResult>
</template>

<script setup>
import { ref } from 'vue';
import mytitle from '@/components/MyTitle';
import downloadResult from './module/downloadResult.vue';
import Pagination from '@/components/Pagination/index.vue';
import { useRouter } from 'vue-router';
// import { getPingList, getJudgImgSave } from '@/api/ping/ping';
import { getPingList, cepingauthApi } from '@/api/ping/ping';
const ciPingStutas = ref({});

const downloadRef = ref(null);
const pingLoading = ref(false);
const loading = ref(false);
const router = useRouter();

// 页码
const pageDate = ref({
  fronttype: 2,
  page: 1,
  pageSize: 10,
});
const pageTotal = ref(0);
const pingList = ref([]);

const handleDown = (val) => {
  downloadRef.value.openChange(val);
};
const getCeping = async () => {
  const data = await cepingauthApi();
  console.log(data, 'data12346');
  if (JSON.parse(data.data.data.data)) {
    ciPingStutas.value = data.data.data.data
      ? JSON.parse(data.data.data?.data)
      : {};
  }
};
getCeping();
// 获取列表
function getList() {
  pingLoading.value = true;
  getPingList(pageDate.value)
    .then((res) => {
      if (res.data.code == 20000) {
        pingLoading.value = false;
        pingList.value = res.data.data;
        pageTotal.value = res.data.total;
      } else {
        pingLoading.value = false;
      }
    })
    .catch(() => {
      pingLoading.value = false;
    });
}
getList();

// 查看报告
function pingInfo(item) {
  router.push({
    path: '/pingresult',
    query: {
      id: item.id,
      isfrom: '2',
    },
  });
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;

  .block {
    margin: 20px 0;

    .demonstration {
      display: block;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}

.table {
  .btn {
    color: var(--el-color-primary);
    cursor: pointer;
  }
}

.no-data {
  text-align: center;
  margin-top: 80px;

  .info {
    color: #666;
    font-size: 20px;
    margin-top: 25px;
  }

  button {
    width: 100px;
    height: 40px;
    background: var(--background-color);
    border: none;
    border-radius: 5px;
    margin-top: 25px;
    font-size: 16px;
    color: #fff;
  }
}
</style>
